<template>
    <div class="dashboard-container">
      <div class="container">
        <div style="margin-bottom: 40px;" >
          <el-button
            type="primary"
            style="float: right;"
            @click="toggleTimeOrder"
          >
            {{ sortOrder === 'asc' ? '+ 按时间倒序排序' : '+ 按时间正序排序' }}
          </el-button>
        </div>
  
        <div class="dynamic-list" v-if="tableData.length" >
          <div class="dynamic-item" v-for="(item, index) in tableData" :key="index">
            <div class="dynamic-header">
              <span class="user-comment">{{ item.apprase }}</span>
              <span class="comment-time">{{ item.createTime }}</span>
            </div>
            <div class="dynamic-content">
              <!-- 可以在这里添加更多的动态内容，如图片、视频等 -->
            </div>
          </div>
        </div>
  
        <empty v-else />
  
        <el-pagination
          class="pageList"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import { getReviewerList } from '@/api/reviewer';
  import { UserModule } from '@/store/modules/user';
  import Empty from '@/components/Empty/index.vue';
  
  @Component({
    name: 'Reviewer',
    components: {
      Empty,
    },
  })
  export default class Reviewer extends Vue {
    private counts: number = 0;
    private page: number = 1;
    private pageSize: number = 10;
    private tableData = [];
    private sortOrder: 'asc' | 'desc' = 'asc';
  
    created() {
      this.init();
    }
  
    private async init() {
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        sortOrder: this.sortOrder
      };
  
      try {
        const res = await getReviewerList(params);
        if (String(res.data.code) === '1') {
          this.tableData = res.data && res.data.data && res.data.data.records;
          this.counts = res.data.data.total;
        }
      } catch (err) {
        this.$message.error('请求出错了：' + err.message);
      }
    }
  
    private handleSizeChange(val: number) {
      this.pageSize = val;
      this.init();
    }
  
    private handleCurrentChange(val: number) {
      this.page = val;
      this.init();
    }
  
    private toggleTimeOrder() {
      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      this.init();
    }
  
    get userName() {
      return UserModule.username;
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard-container {
    .container {
  
      .dynamic-list {
        margin-top: 20px;
        .dynamic-item {
          color: #ECE5D7;
          border: 1px solid #ebeef5;
          border-radius: 4px;
          padding: 16px;
          margin-bottom: 16px;
          // background-color: #fff;
         background-image: url("~@/assets/reviewer_bg.png"); /* 设置背景图片 */
         background-size: cover; /* 背景图片覆盖整个区域 */
         background-position: center; /* 背景图片居中显示 */ ;
  
          .dynamic-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
  
            .user-comment {
              font-weight: bold;
              font-size: 16px;
            }
  
            .comment-time {
              font-size: 12px;
              color: #ECE5D7;
            }
          }
  
          .dynamic-content {
            font-size: 14px;
            color: #606266;
          }
        }
      }
    }
  }
  
  .disabled-text {
    color: #bac0cd !important;
  }
  
  .pageList {
    margin-top: 20px;
    text-align: center;
  }
  </style>